<template>
    <el-card style="max-width: 100%">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">屠宰信息</span>
                <el-button style="margin-left: 16px" @click="Slaughters = true">
                    设置
                </el-button>
            </div>
            <el-descriptions title="" style="margin-top: 20px;">
                <el-descriptions-item label="批次" span="2">{{ Slaughtermodel.batchId }}</el-descriptions-item>
                <el-descriptions-item label="到场均重">{{ Slaughtermodel.counterpoise }}</el-descriptions-item>
                <el-descriptions-item label="到场时间" span="2">{{ Slaughtermodel.beginData.substring(0, 10)
                    }}</el-descriptions-item>
                <el-descriptions-item label="屠宰时间">{{ Slaughtermodel.finishData.substring(0, 10)
                    }}</el-descriptions-item>
            </el-descriptions>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">相关资质</span>
            </div>
            <el-upload :on-success="Cjimg3" v-model:file-list="imagesList3" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview3" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible3">
                <img w-full :src="dialogImageUrl3" alt="Preview Image" />
            </el-dialog>

        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">企业信息</span>
                <el-button style="margin-left: 16px" @click="Corsabled = true">
                    设置
                </el-button>
            </div>
            <el-descriptions title="" style="margin-top: 20px;">
                <el-descriptions-item label="公司名称" span="2">{{ Cormodel.companyName }}</el-descriptions-item>
                <el-descriptions-item label="成立时间">{{ Cormodel.foundingTime }}</el-descriptions-item>
                <el-descriptions-item label="公司地址" span="1">{{ addressall.provinceName }}-{{ addressall.cityName }}-
                    {{ addressall.countyName }}</el-descriptions-item>
                <el-descriptions-item label="公司简介" span="1">{{ Cormodel.campanyIntro }}</el-descriptions-item>
            </el-descriptions>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">企业照片</span>
            </div>
            <el-upload :on-success="Cjimg2" v-model:file-list="imagesList2" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview2" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible2">
                <img w-full :src="dialogImageUrl2" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>
    <div>
        <el-dialog v-model="Slaughters" title="屠宰信息" width="500">
            <el-form :model="Slaughtermodel" label-width="auto" style="max-width: 600px">
                <el-form-item label="批次:">
                    <el-input v-model="Slaughtermodel.batchId" />
                </el-form-item>
                <el-form-item label="到场均重（公斤）:">
                    <el-input v-model="Slaughtermodel.counterpoise" />
                </el-form-item>
                <el-form-item label="到厂时间:">
                    <el-date-picker v-model="Slaughtermodel.beginData" type="date" placeholder="请输入日期"
                        style="width: 100%" />
                </el-form-item>
                <el-form-item label="屠宰时间:">
                    <el-date-picker v-model="Slaughtermodel.finishData" type="date" placeholder="请输入日期"
                        style="width: 100%" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="Slaughters = false">取消</el-button>
                    <el-button type="primary" @click="addSlaughter()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="Corsabled" title="企业信息" width="500">
            <el-form :model="Cormodel" label-width="auto" style="max-width: 600px">
                <el-form-item label="公司名称:">
                    <el-input v-model="Cormodel.companyName" />
                </el-form-item>
                <el-form-item label="公司地址:">
                    <el-select v-model="Cormodel.province" placeholder="请选择省" style="width: 120px;" @change="shilist">
                        <el-option v-for="item in   addressSheng  " :key="item.provinceId" :label="item.provinceName"
                            :value="item.provinceId" />
                    </el-select>

                    <el-select v-model="Cormodel.city" placeholder="请选择市" style="width: 120px;margin-left: 10px;"
                        @change="xianlist">
                        <el-option v-for="item in   addressShi  " :key="item.cityId" :label="item.cityName"
                            :value="item.cityId" />
                    </el-select>

                    <el-select v-model="Cormodel.county" placeholder="请选择对应县城" style="width: 120px;margin-left: 10px;">
                        <el-option v-for="item in   addressXian  " :key="item.countyId" :label="item.countyName"
                            :value="item.countyId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="成立时间:">
                    <el-date-picker v-model="Cormodel.foundingTime" type="date" placeholder="请输入日期"
                        style="width: 100%" />
                </el-form-item>
                <el-form-item label="公司简介:">
                    <el-input type="textarea" v-model="Cormodel.campanyIntro" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="Corsabled = false">取消</el-button>
                    <el-button type="primary" @click="addCor()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
//上传图片变量
const files = "http://localhost:44228/Image/"
const route = useRoute()
console.log(route.query.id, route.query.productionLot)

//屠宰信息
const Slaughters = ref(false)
const Slaughtermodel = reactive({
    batchId: route.query.productionLot,
    counterpoise: 0,
    beginData: "2024-09-05",
    finishData: "2024-09-05",
    certification: "string"
})
const bickSlaughter = () => {
    axios.get("Slaughter/SlaughterManage?batchId=" + route.query.productionLot)
        .then(res => {
            Slaughtermodel.counterpoise = res.data.data.counterpoise;
            Slaughtermodel.beginData = res.data.data.beginData;
            Slaughtermodel.finishData = res.data.data.finishData
        })
}
const addSlaughter = () => {
    axios.post("Slaughter/SlaughterAdd", Slaughtermodel)
        .then(res => {
            if (res.data.data == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Slaughters.value = false
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//相关资质
const dialogVisible3 = ref(false)
const dialogImageUrl3 = ref('')
const imagesList3 = ref([])
const Getimages3 = () => {
    axios.get("Goods/GetImage3?traceType=" + route.query.id)
        .then(res => {
            imagesList3.value = res.data.data;
            imagesList3.value.forEach(item => {
                item.url = files + item.value;
                console.log(item.value)
            })
        })
        .catch(error => {
            console.log(error)
        })
}
const handleRemove = (uploadFile: any) => {
    var id = uploadFile.name
    axios.get("Goods/DelImages?id=" + id)
        .then(res => {
        })
}

const handlePictureCardPreview3 = (uploadFile: any) => {
    dialogImageUrl3.value = uploadFile.url!
    dialogVisible3.value = true
}

//添加
const Cjimg3 = (value: any) => {
    var AddCjImages = reactive({
        traceType: route.query.id,
        urlImg: value.data,
        imageType: 3
    })
    axios.post("Goods/AddImages", AddCjImages)
        .then(res => {
            if (res.data.code == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Getimages3();
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//企业照片
const dialogVisible2 = ref(false)
const dialogImageUrl2 = ref('')
const imagesList2 = ref([])
const Getimages2 = () => {
    axios.get("Goods/GetImage2?traceType=" + route.query.id)
        .then(res => {
            imagesList2.value = res.data.data;
            imagesList2.value.forEach(item => {
                item.url = files + item.value;
                console.log(item.value)
            })
        })
        .catch(error => {
            console.log(error)
        })
}


const handlePictureCardPreview2 = (uploadFile: any) => {
    dialogImageUrl2.value = uploadFile.url!
    dialogVisible2.value = true
}
//添加
const Cjimg2 = (value: any) => {
    var AddCjImages = reactive({
        traceType: route.query.id,
        urlImg: value.data,
        imageType: 2
    })
    axios.post("Goods/AddImages", AddCjImages)
        .then(res => {
            if (res.data.code == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Getimages2();
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//企业信息
const Corsabled = ref(false)
const Cormodel = reactive({
    companyName: "",
    province: 0,
    city: 0,
    county: 0,
    foundingTime: "2024-09-06",
    campanyIntro: "",
    campanyImage: "",
    batchId: route.query.productionLot,
    principal: "",
    groups: 0,
    groupPrincipal: "",
    manufacturingLicense: route.query.manufacturingLicense,
    quantity: 0,
    breedingPlant: "",
    factoryName: ""
})
const addressall = reactive({
    provinceName: '',
    cityName: '',
    countyName: ''
})
const bickCor = () => {
    axios.get("Foot/BickCor?batchId=" + route.query.productionLot)
        .then(res => {
            console.log(res.data.data)
            Cormodel.companyName = res.data.data.companyName;
            Cormodel.foundingTime = res.data.data.foundingTime;
            Cormodel.province = res.data.data.province;
            Cormodel.city = res.data.data.city;
            Cormodel.county = res.data.data.county;
            Cormodel.campanyIntro = res.data.data.campanyIntro;
            addressall.provinceName = res.data.data.provinceName;
            addressall.cityName = res.data.data.cityName;
            addressall.countyName = res.data.data.countyName;
        })
}
const addCor = () => {
    axios.post("Foot/AddCor1", Cormodel)
        .then(res => {
            if (res.data.data == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Corsabled.value = false,
                    //刷新页面
                    location.reload;
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
///省市县列表
//省
const addressSheng = ref([])
const shenglist = () => {
    axios.get("User/GetSheng")
        .then(res => {
            addressSheng.value = res.data.data;
        })
        .catch(error => {
            console.log(error)
        })
}
//市
const addressShi = ref([])
const shilist = (id: number) => {
    axios.get("User/GetShi?shengId=" + id)
        .then(res => {
            addressShi.value = res.data.data;
            console.log(res.data.data)
        })
        .catch(error => {
            console.log(error)
        })
}
//县
const addressXian = ref([])
const xianlist = (ids: number) => {
    axios.get("User/GetXian?shiId=" + ids)
        .then(res => {
            addressXian.value = res.data.data;
            console.log(res.data.data)
        })
        .catch(error => {
            console.log(error)
        })
}
//钩子函数
onMounted(() => {
    //屠宰信息反填
    bickSlaughter()
    //资质图片
    Getimages3();
    //部门图片
    Getimages2();
    //企业信息反填
    bickCor();
    //省
    shenglist();

})
</script>